$(function () {
    //获取裁剪区域的img
    const $image = $('#image')

    const options = {
        aspectRatio: 1,
        preview:'.img-preview'
    }
    $image.cropper(options)


    //为选择文件的按钮绑定事件
    $('#bthchooseing').on('click', function () {
        $('#file').click()
    })
    //监听文件选择框的change事件
    $('#file').on('change', function (e) {
        //e.target指向事件的触发源（触发事件的那个dom对象）
        const files = e.target.files
        if (files.length === 0) return
        // console.log(files);
        const imgURL = URL.createObjectURL(files[0])
        $image.cropper('destroy')
        $image.attr('src', imgURL)
        $image.cropper(options)
    })


    $('#btn_uploadimg').on('click', function () {
        const  dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        $.post('/my/update/avatar', { avatar: dataURL }, function (res) {
            if (res.status === 0) {
                // console.log('你好');
                //头像上传成功
                window.parent.getuserinfo()
            }
            layer.msg(res.message)
        })
       
    })
})